<template>
  <section class="_m-2">
    <ul>
      <li class="_m-2" v-for="item in data" :key="item.id">
        <div class="title d-flex justify-content-between">
          <h3>{{item.sortName}}</h3>
        </div>
        <dl class="p-2 d-flex flex-wrap-wrap align-items-center">
          <router-link
            tag="dd"
            :to="'/list/books/' + item.id + '/' + sort.id"
            class="flex-1 text-center"
            v-for="sort in item.sortVoList"
            :key="sort.id"
          >{{sort.sortName}}</router-link>
        </dl>
      </li>
    </ul>
  </section>
</template>

<script>
export default {
  name: "SortList",
  props: {
    data: Array
  }
};
</script>

<style lang="stylus" scoped>
@import '~assets/css/style.styl';

li {
  background: #fff;

  .title {
    height: 34px;
    font-size: 14px;
    line-height: 34px;

    h3 {
      padding-left: 3vw;
      padding-right: 2vw;
      position: relative;

      i {
        font-size: 12px !important;
        margin-right: 4px;
      }

      &:nth-child(1):after {
        content: '';
        width: 3px;
        height: 14px;
        display: inline-block;
        background: $colorPrimary;
        position: absolute;
        top: 10px;
        left: 1px;
        border-radius: 3px;
      }
    }
  }

  dl {
    dd {
      flex: 0 0 24vw;
      padding: 2vw 0;
    }
  }
}
</style>
